<template>
  <div class="app">
    <h3 v-if="tab==1">首页</h3>
    <h3 v-else-if="tab==2">新闻页</h3>
    <h3 v-else>个人中心</h3>

    <button @click="tabChange" data-id="1">首页</button>
    <button @click="tabChange" data-id="2">新闻</button>
    <button @click="tabChange" data-id="3">中心</button>

    <ul>
      <li v-for="item in starts">{{item}}</li>
    </ul>
    <h3>学生列表</h3>
    <ul>
      <li v-for="item in students">
        <h4>{{item.studentName}}</h4>
        <p>年龄：{{item.age}}-----学校：{{item.school}}</p>
      </li>
    </ul>
    <h3>学生列表（带索引值）</h3>
    <ul>
      <li v-for="item,key in students">
        <h4>索引值：{{key}}----学生名字：{{item.studentName}}</h4>
        <p>年龄：{{item.age}}-----学校：{{item.school}}</p>
      </li>
    </ul>
    <h3>循环对象</h3>
    <ul>
      <li v-for="item,key in students[0]">
        key:{{item}}-----value:{{item}}
      </li>
    </ul>
    <img :src="students[0].imgheader">
    <ol>
      <li v-for="item,index in students" v-if="item.age%2==0" :key="index">
        <h4>索引值:{{index}}-----{{item.studentName}}</h4>
        <p>年龄：{{item.age}}-----学校：{{item.school}}</p>
      </li>
    </ol>
  </div>
</template>

<style>

</style>
  
<script>

  export default {
    name: 'app',
    data () {
      return {
        tab:1,
        starts:['孟美岐',"吴宣仪",'张紫宁'],
        students:[
          {
            studentName:"小明",
            age:"24",
            school:"清华",
            imgheader:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600680397062&di=5dbb0208d30d72b8b88757cf73476517&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg"
          },
          {
            studentName:"小花",
            age:"22",
            school:"上戏",
          },
          {
            studentName:"小白",
            age:"23",
            school:"北大",
          }
        ]
      }
    },
    methods: {
      tabChange:function(e){
        console.log(e)
        let tabid = e.target.dataset.id
        this.tab = tabid
      }
    }
  }
</script>